<!DOCTYPE html>
<html>
  <head>
    <title>jQuery WeUI</title>
    <meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">

<link rel="stylesheet" href="../dist/lib/weui.min.css">
<link rel="stylesheet" href="../dist/css/jquery-weui.css">
<link rel="stylesheet" href="css/tab.css">

  </head>
 
<body ontouchstart>
	<div class="main">
	   	<div class="login-image" id="image">
	   		<img alt="" src="images/ea7d4219d6b5f200a47c0afc0e9e9e89.jpg" width="100%" height="100%" id="userImage">
	   	</div>
	   	<div class="list">
		   	<div class="weui-cells">
			  <a class="weui-cell weui-cell_access" href="userinfromation.html">
			    <div class="weui-cell__bd"><p>用户信息</p></div>
			    <div class="weui-cell__ft"></div>
			  </a>
			  <a class="weui-cell weui-cell_access" href="javascript:;">
			    <div class="weui-cell__bd"><p>用户名</p></div>
			    <div class="weui-cell__ft"></div>
			  </a>
			</div>
		</div>
 	</div>
 	<div id="about" class="weui-popup__container">
	  <div class="weui-popup__overlay"></div>
	  <div class="weui-popup__modal">
	  <form id="iconFrom" method="post" enctype="multipart/form-data" action="/XYL/alumnus/uploadIcon">
		   <br>
		  <img class="weui-uploader__file" alt="" src="images/pic_160.png" id="img">
		  <div class="weui-uploader__input-box">
	           <input id="uploaderInput" class="weui-uploader__input" onchange="previewImage(this,'img')" type="file" accept="image/*" multiple="" name="file">
		  </div>
		  <br><br><br><br>
		  <br>
		  <button class="weui-btn weui-btn_primary" id="submitIcon" type="submit">保存</button>
		  <button class="weui-btn weui-btn_warn close-popup">关闭</button>
	  </form>
	  </div>
	</div>
    <script src="../dist/lib/jquery-2.1.4.js"></script>
	<script src="../dist/lib/fastclick.js"></script>
	<script>
	  $(function() {
	    FastClick.attach(document.body);
	  });
	</script>
<script src="../dist/js/jquery-weui.js"></script>
<script src="js/jquery-form.js"></script>
   <script>
   $.ajax({
		type: "POST",
       url: "/XYL/alumnus/getIcon",
       cache : false,  //禁用缓存
       dataType: "json",
       success: function(data) {
    	   $("#userImage").attr("src","/xylfiles/images/"+data);
       },
       error: function(result){
    	   $.toast("出错了！", "cancel", function(toast) {});
       }
	});
   function previewImage(fileObj,imgPreviewId) {
	    var pic = document.getElementById(imgPreviewId),
	        file = fileObj;
	 
	    var ext=file.value.substring(file.value.lastIndexOf(".")+1).toLowerCase();
	 
	     // gif在IE浏览器暂时无法显示
	     if(ext!='png'&&ext!='jpg'&&ext!='jpeg'){
	         alert("图片的格式必须为png或者jpg或者jpeg格式！"); 
	         return;
	     }
	     var isIE = navigator.userAgent.match(/MSIE/)!= null,
	         isIE6 = navigator.userAgent.match(/MSIE 6.0/)!= null;
	 
	     if(isIE) {
	        file.select();
	        var reallocalpath = document.selection.createRange().text;
	 
	        // IE6浏览器设置img的src为本地路径可以直接显示图片
	         if (isIE6) {
	            pic.src = reallocalpath;
	         }else {
	            // 非IE6版本的IE由于安全问题直接设置img的src无法显示本地图片，但是可以通过滤镜来实现
	             pic.style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod='image',src=\"" + reallocalpath + "\")";
	             // 设置img的src为base64编码的透明图片 取消显示浏览器默认图片
	             pic.src = '';
	         }
	     }else {
	        html5Reader(file,imgPreviewId);
	     }
	}
	 
	 function html5Reader(file,imgPreviewId){
	     var file = file.files[0];
	     var reader = new FileReader();
	     reader.readAsDataURL(file);
	     reader.onload = function(e){
	         var pic = document.getElementById(imgPreviewId);
	         pic.src=this.result;
	     };
	 }
   	$("#login").click(function(){
   		
   	});
   	$("#image").click(function(){
   		$("#about").popup();
   	});
   	
   	$("#iconFrom").submit(function(){
        // 使用ajaxSubmit
        $(this).ajaxSubmit(function(data){
        	//alert(data);
        	$("#userImage").attr("src","/xylfiles/images/"+data);
        	$.toast("操作成功", function() {
                //console.log('close');
              });
        });
        return false;
       });
    
	</script>
  </body>
</html>
